<template>
    <div  style="text-align: center;background-color: #f1f1f3;height: 100%;padding: 0px;margin: 0px;">
        <h1 style="font-size: 50px;">{{'Welcome！'+user.name}}</h1>
        <el-descriptions  title="Personal Center" :column="2" size="40" border>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-s-custom"></i>
                    Account Number
                </template>
                {{user.no}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    phone
                </template>
                {{user.phone}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-location-outline"></i>
                    sex
                </template>
                <el-tag
                        :type="user.sex === '1' ? 'primary' : 'danger'"
                        disable-transitions><i :class="user.sex==1?'el-icon-male':'el-icon-female'"></i>{{user.sex==1?"Male":"Female"}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-tickets"></i>
                    role
                </template>
                <el-tag
                        type="success"
                        disable-transitions>{{user.roleId==0?"Super Administration":(user.roleId==1?"Tutor":"Student")}}</el-tag>

            </el-descriptions-item>
        </el-descriptions>

        <DateUtils></DateUtils>
      <img src="@/assets/images/login_bg.jpg" alt="图片描述" class="background-image">

    </div>


</template>

<style>
.background-image {
  position: absolute; /* 使用绝对定位，使图片可以放置在容器的任何位置 */
  top: 0;
  left: 0;
  width: 100%; /* 图片宽度设置为容器的宽度 */
  height: auto; /* 图片高度根据宽度自动调整 */
  z-index: -1; /* 设置z-index为-1，使图片置于底层 */
}
</style>

<script>
    import DateUtils from "./DateUtils";
    export default {
        name: "Home",
        components: {DateUtils},
        data() {

            return {
                user:{}
            }
        },
        computed:{

        },
        methods:{
            init(){
                this.user = JSON.parse(sessionStorage.getItem('CurUser'))
            }
        },
        created(){
            this.init()
        }
    }
</script>

<style scoped>
    .el-descriptions{
        width:90%;
        margin: 0 auto;
        text-align: center;
        
    }
    
</style>
